<template>
<div class="outer">
  <search-header>
    <span class="back" @click="goBack()"></span>
    <input type="text" slot="inputs"  @focus.prevent="goAdvice()" v-model="searchString">
    <div slot="action" @click="searchData(true)">搜索</div>
  </search-header>
  <scroll :topArea="44" ref="search" @pullingDown="onpullingDown" @pullingUp="onpullingUp" :data="lst">
      <div class="search-results" v-if="lst.length>0">
        <div class="title-area">
            <div class="title-item">
                <div :class="{'timeorder-active': !isPriceOrder}" @click="orderProduct('create_time',true)">新品</div>
            </div>
            <div class="title-item">
                <div :class="{'timeorder-active': isPriceOrder}">价格</div>
                <div class="arrow-area">
                    <span class="arrow-up" @click="orderProduct('display_rent',false)" :class="{'arrow-up-active': priceup && isPriceOrder}"></span>
                    <span class="arrow-down" @click="orderProduct('display_rent',true)" :class="{'arrow-down-active': !priceup && isPriceOrder}"></span>
                </div>
            </div>            
        </div>
        <div class="content-area">
            <div class="pro-container" v-for="n in lst" :key="n.id">
                <div class="img-area">
                    <img :src="n.imgPro" alt="商品图片" @click="goDetail(n.id)">
                </div>
                <div class="word-area">
                    <div class="title">[{{n.oldLevelStr}}] {{n.name}}</div>
                    <div class="lease">￥{{(n.leaseType == "DAILY" ? n.displayRent/100 : n.displayRent*30/100).toFixed(2)}}/{{n.leaseType == "DAILY" ? "天" : "月"}} 起</div>
                </div>
            </div>
        </div>
      </div>
      <div class="no-result" v-else>
        <img src= "../../assets/img/lease/no-product.png" alt="无结果">
        <div>抱歉，没有找到商品额~</div>
      </div>
  </scroll>
</div>
</template>
<script>
import searchHeader from '@/components/searchHeader'
import {getSearchData} from "@/api/homepage.js"
export default {
  name: 'collectPage',
  data: function(){
    return {
      lst: [],
      isPriceOrder: false,
      priceup: false,
      desc: true,
      hasMore: true,
      pageNum: 1,
      pageSize: 10,
      searchString: ""
    }
  },
  components: {
    searchHeader,
  },
  methods: {
    goBack: function(){
      let originUrl = localStorage.originUrl;
      localStorage.removeItem("originUrl");
      this.$router.push({path: originUrl});
    },
    onpullingDown: function(){
      this.searchData(true);
    },
    onpullingUp: function(){
      this.loadMore();
    },
    searchData: function(stat){
      this.pageNum = 1;
      this.priceup = false;
      this.isPriceOrder = false;
      getSearchData(this.searchString,this.pageNum).then( data => {
        if(data.code == 200){
            if(data.data.list && data.data.list.length>0){
              this.lst = data.data.list;
              this.lst.forEach(function(item){
                item.imgPro = item.imgUrl[0].url + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth);
              });
              if(this.lst.length <this.pageSize){
                this.hasMore = false;
              }else{
                this.hasMore = true;
              }
            }else {
              this.lst = [];
              this.hasMore = false;
            }
            if(stat){
              setTimeout(() => {
                this.$refs.search.destroy();
                this.$refs.search.initScroll();
              },800)
            }
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.search.forceUpdate()
        }
      })
    },
    loadMore: function(){
      if(this.hasMore == false){
        this.$refs.search.forceUpdate()
        return
      }
      this.pageNum ++;
      let orderBy = "";
      let desc = "";
      if(this.isPriceOrder == false){
        orderBy = 'create_time';
        desc = this.desc;
      }else if(this.isPriceOrder == true){
        orderBy = "display_rent";
        if(this.priceup == true){
          desc = false;
        }else {
          desc = true;
        }
      }
      getSearchData(this.searchString,this.pageNum,orderBy,desc).then( data => {
        if(data.code == 200){
          if(data.data.list && data.data.list.length>0){
            let tempData = data.data.list;
            tempData.forEach(function(item){
              item.imgPro = item.imgUrl[0].url + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth);
            });
            this.lst = this.lst.concat(tempData);
            if(data.data.list.length < this.pageSize){
              this.hasMore = false;
            }else {
              this.hasMore = true;
            }
          }else {
            this.hasMore = false;
            this.$refs.search.forceUpdate()
          }
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.search.forceUpdate()
        }
      })
    },
    // 商品排序
    orderProduct: function(orderBy,desc){
      this.lst = [];
      this.pageNum = 1;
      this.desc = desc;
      if( orderBy == "create_time" ){
          this.isPriceOrder = false;
      }else {
          this.isPriceOrder = true;
          if(desc == true) {
            this.priceup = false;
          }else {
            this.priceup = true;
          }
      }
      getSearchData(this.searchString,this.pageNum,orderBy,desc).then( data => {
        if(data.code == 200){
          if(data.data.list && data.data.list.length >0){
            this.lst = data.data.list;
            this.lst.forEach(function(item){
                item.imgPro = item.imgUrl[0].url + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth);
            });
            if(this.lst.length < this.pageSize){
              this.hasMore = false;
            }else {
              this.hasMore =  true;
            }
          }else {
            this.hasMore = false;
            this.$refs.search.forceUpdate()
          }
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.search.forceUpdate()
        }
      })       
    },
    goDetail: function(id){
      this.$router.push({name:'choose' , params: {'id': id}});
    },
    goAdvice: function(){
      this.$router.push({name:'advice'});
    }
  },
  mounted: function(){
    this.searchString = this.$route.params.searchStr;
    this.searchData();
  }
}
</script>
<style lang="scss" scoped>
  .outer {
    height: 100%;
    width: 100%;
    position: absolute;
  }
// 搜索结构样式
  .search-results {
    background: #fff;
    padding: 0 12px;
    overflow: hidden;
    padding-bottom: 18px;
    & .title-area {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 43px;
      font-size: 14px;
      border-bottom: 1px solid #eee;
      color: #999;
      & .title-item {
        margin-right: 28px;
        &>div {
          float: left;
          &.timeorder-active {
            color: #666;
          }
        }
        & .arrow-area {
          margin-left: 8px;
          width: 10px;
          height: 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          &>span {
            width: 0;
            height: 0;
            border: 5px solid transparent;
          }
          & .arrow-up {
            border-bottom-color: #999;
          }
          & .arrow-down {
            margin-top: 3px;
            border-top-color: #999;
          }
          & .arrow-up-active {
            border-bottom-color: #666;
          }
          & .arrow-down-active {
            border-top-color: #666;
          }
        }
      }
    }
    & .content-area {
      width: 100%;
      & .pro-container {
        width: 169px;
        float: left;
        margin-top: 12px;
        margin-bottom: 7px;
        &:nth-child(even) {
          margin-left: 13px;
        }
        & .img-area {
          width: 100%;
          height: 169px;
          background: #F4F7FB;
          display: flex;
          justify-content: center;
          align-items: center;
          max-width: 100%;
          &>img {
            width: 100%;
            height: 100%;
            border: 1px solid #eee;
          }
        }
        & .word-area {
          width: 100%;
          margin-top: 16px;
          color: #666;
          & .title {
            font-size: 14px;
            line-height: 16px;
            display:block;
            white-space:nowrap; 
            overflow:hidden; 
            text-overflow:ellipsis
          }
          & .lease {
            font-size: 13px;
            line-height: 15px;
            color: #ff4000;
            margin-top: 8px;
          }
        }
      }
    }
  }
  .no-result {
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    &>img {
      width: 129px;
      margin: 0 auto;
      margin-top: 95px;
    }
    &>div {
      width: 100%;
      text-align: center;
      font-size: 16px;
      color: #999;
      margin-top: 58px;
      margin-bottom: 256px;
    }
  }

</style>